<template>
  <view class="box">
    <!-- 自定义导航栏 -->
    <view class="box1">
      <uv-navbar :fixed="false" bgColor="#f7f8fa">
        <template v-slot:left>
          <view class="uv-nav-slot">
            <uv-icon name="map-fill" size="25" color="#008c8c" @click="openPicker">
            </uv-icon>{{dizhi}}
            <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
          </view>
        </template>
        <template v-slot:center>
          <view class="uv-nav-slot">
            <uv-input placeholder="输入关键字模糊查询" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
              shape="circle" border="none">
            </uv-input>
          </view>
        </template>
      </uv-navbar>
    </view>
    <!-- 轮播 -->
    <view class="box2">
      <uv-swiper :list="list" indicator indicatorMode="dot" circular height="400rpx"></uv-swiper>
    </view>
    <!-- 新人下单有礼 -->
    <view class="box3">
      <view class="box3-top">
        新人下单有礼
        <text class="box3font1">返现奖励</text>
      </view>
      <view class="box3-bottom">
        <view class="box3-bottom1">
          <view>￥5</view>
          <view class="box3-bottom11">
            <uv-icon name="lock-opened-fill" size="20" label="第一单" color="#96979d" labelColor="#96979d"></uv-icon>
          </view>
        </view>
        <view class="box3-bottom1">
          <view>￥10</view>
          <view class="box3-bottom11">
            <uv-icon name="lock-opened-fill" size="20" label="第二单" color="#96979d" labelColor="#96979d"></uv-icon>
          </view>
        </view>
        <view class="box3-bottom1">
          <view>￥15</view>
          <view class="box3-bottom11">
            <uv-icon name="lock-opened-fill" size="20" label="第三单" color="#96979d" labelColor="#96979d"></uv-icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 告示 -->
    <view class="box4">
      <uv-notice-bar :text="text" bgColor="#e7f4f4" color="#008c8c"></uv-notice-bar>
    </view>
    <!-- 宫格 -->
    <view class="box5">
      <uv-grid :col="4">
        <uv-grid-item v-for="(item,index) in baseList" :key="index" @click="geng(item.id,item.url)">
          <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="60"></uv-icon>
          <text class="grid-text">{{item.title}}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <!--  -->
    <view class="box6">
      <image src="/static/image/haibao1.png" mode=""></image>
    </view>
    <!--  -->
    <view class="box7">
      <view class="box7-top">
        <view class="box7-top1">
          师傅推荐
        </view>
        <view class="box7-top2" @click="jump">
          更多<uv-icon name="arrow-right" size="18" color="#a6a6a6"></uv-icon>
        </view>
      </view>
      <view class="box7-bottom">
        <view class="bottom-top1" v-for="item in 3">
          <view class="photo">
            <image class="image2" src="/static/image/mein.jpg" mode=""></image>
            <view class="shadow">上次服务</view>
          </view>
          <view class="text1">这是师傅的名称</view>
          <view class="text2">已服务:234次</view>
        </view>
      </view>
    </view>
    <!-- 宫格2 -->
    <view class="box8">
      <uv-grid :col="4">
        <uv-grid-item v-for="(item,index) in baseList" :key="index" @click="geng(item.id,item.url)">
          <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="60"></uv-icon>
          <text class="grid-text">{{item.title}}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <!-- 客服 -->
    <view class="box44" @click="ke">
      <uv-icon name="kefu-ermai" color="#000" size="30"></uv-icon>
      <view class="">客服</view>
    </view>
    <!-- 弹窗 -->
    <uv-popup ref="popup" mode="bottom" :closeable="true" bgColor="none">
      <view class="tanchu">
        <view class="">更多服务</view>
        <uv-grid :col="4">
          <uv-grid-item v-for="(item,index) in base_list" :key="index" @click="geng1(item.id)">
            <image :src="item.image" mode=""></image>
            <text class="grid-text">{{item.name}}</text>
          </uv-grid-item>
        </uv-grid>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    uniRequest
  } from "../../utils/request.js"
  const picker = ref(null)
  const columns = ref([
    ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '滨州', '德州', '聊城', '临沂', '菏泽']
  ])
  const dizhi = ref('济南')
  const list = ref([
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  ])
  const text = ref('uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用')
  const baseList = ref(
    [{
      id: 1,
      name: '/static/image/dingdan.png',
      title: '上门遛狗',
      url: "/pages/zhanghaodl/zhanghaodl"
    }, {
      id: 2,
      name: '/static/image/dingdan.png',
      title: '上门遛猫',
      url: "/pages/staydoor/staydoor"
    }, {
      id: 3,
      name: '/static/image/dingdan.png',
      title: '上门洗澡'
    }, {
      id: 4,
      name: '/static/image/dingdan.png',
      title: '上门美容'
    }, {
      id: 5,
      name: '/static/image/dingdan.png',
      title: '上门剪毛'
    }, {
      id: 6,
      name: '/static/image/dingdan.png',
      title: '上门训练'
    }, {
      id: 7,
      name: '/static/image/dingdan.png',
      title: '上门医生'
    }, {
      id: 8,
      name: '/static/image/dingdan.png',
      title: '更多服务',
      url: "#",
      geng: 'geng'
    }]
  )
  const baseList1 = ref(
    [{
      id: 1,
      name: '/static/image/dingdan.png',
      title: '上门遛狗',
      url: "/pages/zhanghaodl/zhanghaodl"
    }, {
      id: 2,
      name: '/static/image/dingdan.png',
      title: '上门遛猫',
      url: "/pages/staydoor/staydoor"
    }, {
      id: 3,
      name: '/static/image/dingdan.png',
      title: '上门洗澡'
    }, {
      id: 4,
      name: '/static/image/dingdan.png',
      title: '上门美容'
    }, {
      id: 5,
      name: '/static/image/dingdan.png',
      title: '上门剪毛'
    }, {
      id: 6,
      name: '/static/image/dingdan.png',
      title: '上门训练'
    }, {
      id: 7,
      name: '/static/image/dingdan.png',
      title: '上门医生'
    }, {
      id: 8,
      name: '/static/image/dingdan.png',
      title: '服务介绍',
      url: "/pages/services/services"
    }]
  )
  const base_list = ref([])


  // 更多服务查询接口
  onLoad(() => {
    uniRequest('More/index?server=1', function(err, data) {
      if (err) {
        // 错误
        console.log(err)
      } else {
        console.log('"成功了"', data)
        base_list.value = data
        console.log('123',base_list.value)
      }
    }, 'GET', {

    });
  })
  const openPicker = (() => {
    picker.value.open()
  })
  const confirm = ((e) => {
    console.log('confirm', e.value[0]);
    dizhi.value = e.value[0]
  })
  const jump = (() => {
    // console.log(e);
    uni.navigateTo({
      url: '/pages/listmasters/listmasters'
    });
  })
  const ke = (() => {
    // console.log(e);
    uni.navigateTo({
      url: '/pages/exclusivecustomer/exclusivecustomer'
    });
  })
  const popup = ref()
  const geng = ((id, url) => {
    if (id == 8) {
      // console.log(id);
      popup.value.open();
    } else {
      uni.navigateTo({
        url: url
      });
    }
  })
  const geng1 = ((id) => {
    uni.navigateTo({
      url: `/pages/services/services?id=${JSON.stringify(id)}`
    });
  })
</script>

<style lang="scss">
  @import url("index.scss");
</style>